<template>
    <div class="register">
        <div class="stu_register">
            <h1 style="font-size:30px;">用户注册</h1>
            <div class="registerForm">
                <el-form :model="ruleForm" :rules="rules" ref="ruleForm">
                    <el-form-item label="账号:" prop="user">
                        <el-input v-model="ruleForm.user"></el-input>
                    </el-form-item>
                    <el-form-item label="密码:" prop="pass">
                        <el-input type="password" v-model="ruleForm.pass"></el-input>
                    </el-form-item>
                    <div style="margin-top: 20px">
                        <el-button type="primary" class="registerBtn" @click="submitForm('ruleForm')">注册</el-button>
                    </div>
                    <div style="margin-top: 20px">
                        <el-button type="text" class="loginBtn" @click="login">去登录</el-button>
                    </div>
                </el-form>
            </div>
        </div>
    </div>
</template>
<script>
    export default {
        data() {
            return {
                ruleForm: {
                    user: '',
                    pass: '',
                },
                rules: {
                    user: [
                        {required: true,message:'请输入邮箱账号',trigger: 'blur' }
                    ],
                    pass: [
                        {required: true,message:'请输入密码',trigger: 'blur' }
                    ],
                }
            };
        },
        methods: {
            submitForm(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        this.$http.post("/api/register",{
                            usr:this.ruleForm.user,
                            pass:this.ruleForm.pass
                        }).then(res=>{
                           if(res.data.status===200){
                               this.$message({type:"success",message:res.data.msg})
                               this.ruleForm={};
                           }else{
                               this.$message({type:"warning",message:res.data.msg})
                           }
                        })
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            },
            login() {
                this.$router.push("/login");
            }
        }
    }
</script>

<style scoped>
    .register{
        background-color: #5daf34;
        width: 100%;
        height: 100%;
        background-size: 100% 100%;
        background-position: center center;
        overflow: auto;
        position: relative;
    }
    .stu_register{
        position: absolute;
        left: 50%;
        top: 50%;
        width: 350px;
        height: 330px;
        line-height: 30px;
        margin: -150px 0 0 -190px;
        padding: 40px;
        border-radius: 5px;
        background: #fff;
        border: 1px solid #ccc;
    }
    .registerBtn{
        width: 100%;
    }
    .loginBtn{
        width: 100%;
    }
    .registerForm{
        margin-top: 12px;
    }
</style>
